{% load static %}
<div class="nav-box">
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: rgba(76,158,196,0.3);">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            {% if user.is_authenticated %}
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">用户: {{ user.username }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page"
                       href="{% url 'user_manage:user_password_change' %}">修改密码</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page"
                       href="{% url 'user_manage:user_logout' %}">注销</a>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page"
                       href="{% url 'user_manage:user_login' %}">登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page"
                       href="{% url 'user_manage:user_login' %}">注册</a>
                </li>
            {% endif %}
        </ul>
    </nav>
</div>
<div class="container">
    <nav>
        <div class="brand">
            <img src="{% static 'images/logo.jpg' %}" alt="...">
            <p>
                拔引科技
                <span>BAYIN</span>
            </p>
        </div>
        <hr class="line">
        <div class="accordion-menu">
            <div class="accordion-item">
                <div class="accordion-header">
                    <i style="color: white" class="fa-regular fa-address-book fa-lg">用户</i>
                </div>
                <div class="accordion-content">
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="submenu-header">
                                <a class="nav-link active" aria-current="page" href="{% url 'device:admin_list' %}">用户列表</a>
                            </div>
                        </div>
                        <div class="submenu-item">
                            <div class="submenu-header">
                                <i></i><span>用户配置</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <i style="color: white" class="fa-regular fa-list-check fa-lg">设备</i>
                </div>
                <div class="accordion-content">
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="submenu-header">
                                <a class="nav-link active" aria-current="page" href="{% url 'device:device_list' %}">设备列表</a>
                            </div>
                        </div>
                        <div class="submenu-item">
                            <div class="submenu-header">设备配置</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <i style="color: white" class="fa-regular fa-timeline fa-lg">故障</i>
                </div>
                <div class="accordion-content">
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="submenu-header">故障清单</div>
                        </div>
                        <div class="submenu-item">
                            <div class="submenu-header">故障分析</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <i style="color: white" class="fa-regular fa-chart-simple fa-lg">图表</i>
                </div>
                <div class="accordion-content">
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="submenu-header">图表分析</div>
                        </div>
                        <div class="submenu-item">
                            <div class="submenu-header">图表配置</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <i style="color: white" class="fa-regular fa-registered fa-lg">溯源</i>
                </div>
                <div class="accordion-content">
                    <div class="submenu">
                        <div class="submenu-item">
                            <div class="submenu-header">溯源列表</div>
                        </div>
                        <div class="submenu-item">
                            <div class="submenu-header">溯源分析</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var accordionHeaders = document.querySelectorAll('.accordion-header, .submenu-header');

            accordionHeaders.forEach(function (header) {
                header.addEventListener('click', function () {
                    // Close any already open accordion items (optional)
                    let activeHeaders = document.querySelectorAll('.accordion-header.active, .submenu-header.active');
                    activeHeaders.forEach(function (activeHeader) {
                        if (activeHeader !== header) {
                            activeHeader.classList.remove('active');
                            var content = activeHeader.nextElementSibling;
                            if (content) {
                                content.style.display = 'none';
                            }
                        }
                    });

                    // Toggle the current accordion item
                    header.classList.toggle('active');
                    let content = header.nextElementSibling;
                    if (content.style.display === 'block') {
                        content.style.display = 'none';
                    } else {
                        content.style.display = 'block';
                    }
                });
            });
        });
    </script>
</div>